<template>
  <div class="correct-header" ref="headerDom">
    <span class="mv-header__item"
      >本题总份数：{{
        singleQtsCorrectStore.currentQtsData?.submit_count
      }}份</span
    >
    <span class="mv-header__item"
      >待批改：{{ singleQtsCorrectStore.currentQtsData?.await_grade }}份</span
    >
    <span
      class="mv-header__item"
      v-if="
        props.studenName &&
        ((!singleQtsCorrectStore.isRemark &&
          singleQtsCorrectStore.currentQtsData?.await_grade != 0) ||
          singleQtsCorrectStore.isRemark)
      "
      >学生：{{ props.studenName }}</span
    >

    <button
      class="mv-header__btn mv-header__btn-progress"
      @click.stop="showRecordList"
    >
      批改记录
    </button>

    <span class="mv-header__divider mv-header__divider--big"></span>
    <button
      @click="toggleScreen"
      :title="isFullScreen ? '退出全屏' : '全屏阅卷'"
      class="mv-header__btn mv-header__btn-screen"
      :class="{ 'full-screen': isFullScreen }"
    ></button>
    <button @click="goBack" class="mv-header__btn mv-header__btn-back">
      退出
    </button>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useSingleQtsCorrectStore } from '@/stores/single-correct'
const singleQtsCorrectStore = useSingleQtsCorrectStore()

const router = useRouter()

const emit = defineEmits(['showCorrectStat', 'showRecordList'])
const props = defineProps({
  qtsIndexData: { type: Array, required: true },
  studenName: { type: String, required: true }
})

const headerDom = ref()
const isFullScreen = ref(false)

onMounted(() => {
  window.addEventListener('fullscreenchange', () => {
    if (!document.fullscreenElement) {
      isFullScreen.value = false
    }
  })
})

const showRecordList = () => {
  emit('showRecordList')
}

const toggleScreen = () => {
  !isFullScreen.value && enterFullScreen()
  isFullScreen.value && exitFullScreen()
}

const enterFullScreen = () => {
  if (document.documentElement.requestFullscreen) {
    document.documentElement.requestFullscreen().catch(err => {
      console.error('Error attempting to enable full-screen mode:', err)
    })
  } else if (document.documentElement.mozRequestFullScreen) {
    document.documentElement.mozRequestFullScreen()
  } else if (document.documentElement.webkitRequestFullscreen) {
    document.documentElement.webkitRequestFullscreen(
      Element.ALLOW_KEYBOARD_INPUT
    )
  } else if (document.documentElement.msRequestFullscreen) {
    document.documentElement.msRequestFullscreen()
  }
  isFullScreen.value = true
}

const exitFullScreen = () => {
  if (document.fullscreenElement) {
    if (document.exitFullscreen) {
      document.exitFullscreen()
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen()
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen()
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen()
    }
    isFullScreen.value = false
  }
}

const goBack = () => {
  if (isFullScreen.value) {
    exitFullScreen()
  }
  router.push({ path: '/index/assignment' })
}
</script>

<style lang="less" scoped>
@baseURL: '@/assets/images/single-correct';
button {
  cursor: pointer;

  &:focus,
  &:hover {
    filter: opacity(0.8);
  }

  &:active {
    filter: brightness(0.9);
  }
}
.correct-header {
  position: relative;
  padding: 0 35px;
  height: 80px;
  background-color: #34495e;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #fff;
  .block-select-container {
    position: relative;
    width: 143px;
    height: 100%;
    display: flex;
    align-items: center;

    .count-hint {
      position: absolute;
      top: 5px;
      right: 11px;
      box-sizing: border-box;
      padding-right: 5px;
      width: 76px;
      height: 26px;
      background-color: #58d68d;
      border-radius: 10px 12px 14px 0px;
      line-height: 26px;
      text-align: center;
    }

    .qb-select__trigger {
      margin-left: 21px;
      height: 76px;
      line-height: 76px;
      font-size: 20px;
      cursor: pointer;
    }
  }

  .mv-header__item {
    flex: 0 0 auto;
    margin: 0 35px;
    color: #fff;
    font-size: 20px;
  }

  .progress-hint {
    position: absolute;
    top: 52px;
    left: 58px;
    z-index: 2;
    box-sizing: border-box;
    padding-top: 10px;
    width: 479px;
    height: 169px;
    background-size: contain;
    background-image: url('@{baseURL}/bg-progress-hint.png');
    line-height: 169px;
    text-align: center;
    font-size: 16px;
    color: #595959;
  }
}
.mv-header__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 16px;
  background-color: #d9d9d9;
}

.mv-header__divider--big {
  height: 40px;
}

.mv-header__btn {
  flex: 0 0 auto;
  border: 0;
  padding: 0;
  outline: 0;
  background-color: transparent;
  line-height: 1;
  font-size: inherit;
  color: inherit;
}
.mv-header__btn-progress {
  margin: 0 14px 0 auto;
  cursor: pointer;
  color: #fff;
}
.mv-header__btn-record {
  position: relative;
  margin: 0 40px 0 14px;
  cursor: pointer;
}

.mv-header__btn-screen {
  margin-left: 25px;
  width: 26px;
  height: 26px;
  background-image: url('@{baseURL}/btn-fullscreen.png');
  background-size: contain;
}

.full-screen {
  background-image: url('@{baseURL}/btn-restorescreen.png');
  background-size: contain;
}

.mv-header__btn-back {
  margin: 0 0 0 25px;
  padding-left: 32px;
  background-image: url('@{baseURL}/btn-quit.png');
  background-size: 23px 27px;
  background-repeat: no-repeat;
  background-position: left;
  line-height: 27px;
}
.red-piont {
  margin-top: -10px;
  margin-right: 10px;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background-color: #fd686d;
}
</style>
